<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\User;
use common\models\UserEducation;
use common\models\Recruit;
use common\models\Employment;

$this->title = '个人中心';
?>
<style>
    #designer-header {height:280px;color:#fff;background-color:rgba(0,0,0,.5);}
    #designer-header a:hover,
    #designer-header a {color:#fff;}
    #basic-information {position:relative;height:220px;padding-top:20px;}
    #photo {position:absolute;width:160px;margin-left:20px;margin-top:20px;text-align:center;}
    #photo img {height:160px;width:160px;border-radius:100%;}
    #good-at {margin-left:260px;margin-top:40px;line-height:30px;}

    .employment-detail {padding:20px 10px;border-bottom:1px solid #ccc;}
    .employment-detail .bottom-handle {height:55px;}
    .employment-detail .handle,
    .employment-detail .imager {float:left;}
    .employment-detail .imager {width:240px;height:60px;line-height:25px;}
    .employment-detail .imager img {width:60px;height:60px;margin-right:15px;border-radius:60px;float:left;}
    .employment-detail .handle {margin-left:20px;width:690px;height:60px;line-height:60px;}
    #flyer-pause {display:none;padding:20px;}
    #flyer-pause .input-title {width:100px;}
    #flyer-pause .input-block {margin-left:100px;}

    .big-bar {float:left;width:50%;}
    .big-bar .panel {height:290px;margin:10px;background:#fafafa;box-shadow:0 0 5px rgba(0,0,0,0.4);background-position:center;background-repeat:no-repeat;}
    .big-bar .panel a {display:block;padding-top:210px;font-size:28px;text-align:center;text-decoration:none;}
    .small-bar {float:left;width:25%;}
    .small-bar .panel {height:230px;margin:20px 0;border-left:1px solid #ccc;background-position:center;background-repeat:no-repeat;}
    .small-bar.first .panel {border-left:none;}
    .small-bar .panel a {display:block;padding-top:180px;font-size:22px;text-align:center;text-decoration:none;}

    #applicant-list {}
    #applicant-list p {line-height:40px;border-bottom:1px solid #ccc;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'index']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content pd-20px">
                <div class="box-shadow" id="basic-information">
                    <div id="photo"><img src="<?= Render::upload($user->photo) ?>"></div>
                    <div id="good-at">
                        <p>
                            <span class="inline-block w-150px">姓名：<?= $user->realname ?></span>
                            <span class="inline-block w-150px">性别：<?= Render::text(User::$genderSelector, $user->gender, false) ?></span>
                        </p>
                        <p>
                            <span class="inline-block w-150px">年龄：<?= Render::age($user->birthday) ?></span>
                            <span class="inline-block w-150px">工作经验：<?= Render::text(User::$workLifeSelector, $user->work_life, false) ?></span>
                            <span class="inline-block w-150px">学历：<?= Render::text(UserEducation::$degreeSelector, Render::value($user, 'education.degree', '--'), false) ?></span>
                        </p>
                        <p>擅长类目：<span class="categories"><?= implode(',', ArrayHelper::getColumn($user->categories, 'category_id')) ?></span></p>
                        <p>
                            <?php if($user->active()) { ?>
                                <span>审核通过，开始工作</span>
                                <a class="fr flyer-button normal border-round mr-20px" href="<?= Url::to('@web/search/recruit') ?>">找工作</a>
                            <?php } else { ?>
                                <span>资料审核中.</span>
                            <?php } ?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="data-content pd-20px">
                <div class="box-shadow pd">
                    <div class="sub-title"><i></i>待处理服务</div>
                    <div id="info-table">
                        <div class="employment-detail"><i class="icon-search"></i> 数据加载中，请稍后.</div>
                    </div>
                </div>
            </div>
            <div class="data-content clear" style="height:620px;">
                <div class="big-bar">
                    <div class="panel" style="background-image:url(<?= Url::to('@web/web/static/image/user/wallet.png') ?>);">
                        <a href="<?= Url::to('@web/designer/bondo') ?>">保证金</a>
                    </div>
                </div>
                <div class="big-bar">
                    <div class="panel" style="background-image:url(<?= Url::to('@web/web/static/image/user/recruit.png') ?>);">
                        <a href="<?= Url::to('@web/designer/resume') ?>">发布简历</a>
                    </div>
                </div>
                <div class="big-bar">
                    <div class="panel" style="background-image:url(<?= Url::to('@web/web/static/image/user/paying.png') ?>);">
                        <a href="#">我的红包</a>
                    </div>
                </div>
                <div class="big-bar">
                    <div class="panel" style="background-image:url(<?= Url::to('@web/web/static/image/user/wallet.png') ?>);">
                        <a href="<?= Url::to('@web/designer/wallet') ?>">冻结资金</a>
                    </div>
                </div>
            </div>
            <div class="data-content pd-20px">
                <div class="box-shadow pd">
                    <div class="sub-title"><i></i>投递信息</div>
                    <div id="applicant-list">
                        <?php foreach($applicants as $applicant) { ?>
                            <p>
                                <a class="fr flyer-button normal border-round thin mt-7px" href="<?= Url::to('@web/seer/recruit?id='.$applicant->recruit_id) ?>">查看详情</a>
                                <span>[<?= date('Y-m-d H:i:s', $applicant->created_at) ?>] 投递职位 [<?= $applicant->recruit->title ?>]</span>
                            </p>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none;">
    <?= Render::select('type', Recruit::$typeSelector, null, ['id' => 'recruit-type']) ?>
    <?= Render::select('status', Employment::$statusSelector, null, ['id' => 'employment-status']) ?>
</div>

<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    var categorierClass = new categorier();
    $(document).ready(function() {
        // 设置分类内容
        categorierClass.setData(DesignCategories).setRelate(DesignCategoriesRelation);
        tableHandler.renderCategory({
            category: $('#basic-information .categories'), color: false, splite: '，', functionName: function (id) {
                return categorierClass.renderTitles(id, false);
            }
        });
        // 初始化表格异步加载事件
        (new tabler).init({
            // 请求地址
            url: '<?= Url::to('@web/designer/employment-list?status='.Employment::StatusInit) ?>',
            // 数据渲染配置
            table: '#info-table', page: '#info-page', template: 'info-template', search: '#info-search', readyCall: true,
            // param => tabler
            afterPost: function(param) {
                // 名称显示
                tableHandler.renderCategory({ category: $(param.tabler).find('.type'), select: '#recruit-type' });
                tableHandler.renderCategory({ category: $(param.tabler).find('.status'), select: '#employment-status' });
                // 初始化确认暂停按钮事件
                tableHandler.alertDialog({
                    button: $(param.tabler).find('.pause-button'),
                    title: '<i class="icon-"></i> 暂停雇佣', area: ['650px', '285px'],
                    content: $('#flyer-pause'), afterAlert: function(params) {
                        $('input[name=employment_id]').val($(params.mthis).parents('.employment-detail').attr('data-id'));
                        $('#start_day').html($(params.mthis).attr('data-start_day'));
                        $('#days').html($(params.mthis).attr('data-days') + ' 天');
                        $('#remark').html($(params.mthis).attr('data-remark'));
                    }
                });
                tableHandler.requestSingle({
                    button: '.confirm-button', isConfirm: true, isShadow: true, trKey: '.employment-detail',
                    url: "<?= Url::to('@web/designer/employment-confirm') ?>",
                    beforeRequest: function(param) {
                        // $(param.mthis).attr('disabled', true);
                    },
                    requestFail: function(param) {
                        // $(param.mthis).removeAttr('disabled');
                    },
                    requestSuccess: function (param) {
                        layer.alert(param.response.message, { icon: 6 }, function() {
                            $(param.mthis).after('<span class="flyer-status green">已接受</span>');
                            $(param.mthis).remove();
                            layer.closeAll();
                        });
                    }
                });
                tableHandler.requestSingle({
                    button: '#save-button', isConfirm: false, isShadow: false,
                    url: "<?= Url::to('@web/designer/employment-pause') ?>",
                    beforeRequest: function(param) {
                        param.data = { id: $('input[name=employment_id]').val() }
                        $(param.mthis).attr('disabled', true);
                    },
                    requestFail: function(param) {
                        $(param.mthis).removeAttr('disabled');
                    },
                    requestSuccess: function (param) {
                        layer.alert(param.response.message, { icon: 6 }, function() {
                            $('.tr-' + param.data.id).find('.pause-button').after('<span class="flyer-status green">您的工作已顺延</span>');
                            $('.tr-' + param.data.id).find('.pause-button').remove();
                            layer.closeAll();
                        });
                    }
                });
            }
        });
    });
</script>

<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <div class="employment-detail tr-{{info.id}}" data-id="{{info.id}}">
        <div>
            <span class="fr"><span class="status">{{info.status}}</span></span>
            <span>订单号：{{info.order_number}}</span>
            <span class="ml-40px">下单时间：{{info.created_at | dateShow}}</span>
            <span class="ml-40px">服务日期：{{info.begin | dayShow}} ~ {{info.finish | dayShow}}</span>
        </div>
        <div class="bottom-handle mt-10px clear">
            <div class="imager">
                <img src="<?= Render::upload('{{info.employer.photo}}') ?>">
                <p class="mt-5px">{{info.employer.nickname}}（{{info.employer.realname}}）</p>
                <p>{{info.hires / 100 | fmoney}} <i class="icon-cny"></i></p>
            </div>
            <div class="handle">
                <span class="type">{{info.type}}</span>
                <span class="ml-40px">订单金额：{{info.total_amount / 100 | fmoney}} <i class="icon-cny"></i></span>
                <div class="fr pr-5px">
                    {{if info.status == '<?= Employment::StatusInit ?>'}}
                    <button class="flyer-button normal border-round narrow thin confirm-button"><i class="icon-ok"></i> 接受雇佣</button>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="employment-detail"><i class="icon-ban-circle"></i> 您暂时没有待处理的服务</div>
    {{/if}}
</script>